<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排行榜</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./js/module/appendID.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" href="./css/common/reset.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common/common.css">
    <link rel="stylesheet" href="./css/module/my.css">
    <link rel="stylesheet" href="./css/base/base.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="shortcut icon" href="./resource/static/favicon.ico" type="image/x-icon">
    <base target="_blank" />
    <style>
    
    </style>
</head>

<body>
    <!-- 头部部分 -->
    <header></header>
    <!-- main -->
    <main>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myModalLabel">播放页新增</h4>
                    </div>
                    <div class="modal-body">
                        已经添加到播放歌单列表
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon "
                                aria-hidden="true"></span>取消</button>

                        <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span
                                class="glyphicon " aria-hidden="true"></span>确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="cont">
            <div class="left">
                <p class="title" style="font-size: 18px!important;
                letter-spacing: 3px;">云音乐排行榜</p>
                <div id="musicLis"></div>
            </div>
            <div class="right">
                <div id="top" style="height:210px"></div>
                <div id="songList" style="width: 920px; padding-left: 50px;">
                    <table class="table table-hover table-condensed" sytle="table-layout:fixed;" id="songsLisAll">
                    </table>
                </div>
            </div>
        </div>

    </main>
    <!-- footer页面 -->
    <footer></footer>
    <script type="text/html" id="tpl">
        <div class="hotTop">
            <img src="{{ data.coverImgUrl }}" alt="">
            <div class="detail">
                <p class="title">{{ data.name }}</p>
                <p ><span>最近更新</span><span class="subTitle">({{ data.updateTime }})</span></p>
                <div class="controls">
                    <div class="btnOne">
                        <span class="iconfont iconColor icon-xinbaniconshangchuan-"></span>
                        <span>播放</span>
                        <span></span>
                    </div>
                    <div class="btnTwo">
                            <span class="iconfont iconColor icon-shoucang1
                            "></span>
                        <span>{{ data.subscribedCount / 1000 }}万</span>
                    </div>
                    <div class="btnThree">
                            <span class="iconfont iconColor icon-fenxiang"></span>
                        <span>{{ data.trackCount }}</span>
                    </div>
                    <div class="btnFour">
                            <span class="iconfont iconColor icon-xiazai"></span>
                        <span>下载</span>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <script src="./js/reqMy.js"></script>

    <script src="./js/utill.js"></script>
    <!-- 
        1.把所有的点击事件的id传递到sessionStrorage中去
        2.音乐播放器可以从sessionStorage中获取id并且遍历，加入到音乐播放器中，从而实现播放
        3.如果需要进行其他操作，可以通过id进行增删改查
     -->
    <script>
        $("#btn_add").click(function () {
            $("#myModalLabel").text("新增");
            $('#myModal').modal();
        });
    </script>
</body>

</html>